<template>
  <div class="box">
    <div>区域管理</div>
    <div>
      <el-select v-model="quyu" slot="prepend" placeholder="请选择" style="width:130px;">
        <el-option label="单人明区" value="单人明区"></el-option>
        <el-option label="单人暗区" value="单人暗区"></el-option>
        <el-option label="双人区(靠窗)" value="双人区(靠窗)"></el-option>
      </el-select>
    </div>
    <div>桌子数量:{{ shu }}</div>
    <div>1.新的区域名称:单人明区</div>
    <div> 新的区域名称:<el-input v-model="input" style="width:500px;" placeholder="区域名称"></el-input>
    </div>
    <div>2.当前区域描述：我是一段放飞自我，并且可以五彩斑斓的白碾压五光十色的</div>
    <div>新的区域描述:<el-input v-model="input2" style="width:500px;" placeholder="区域描述"></el-input>
    </div>
    <div>3.当前价格:{{ shij }}/h</div>
    <div>新的价格设定:<el-input v-model="input3" style="width:100px;" placeholder="区域名称"></el-input>/h</div>
    <div>
      <el-button type="primary">确定修改</el-button>
    </div>
  </div>
</template>

<script>
import { toRefs, reactive, computed } from 'vue'
export default {
  setup () {
    const data = reactive({
      input: '',
      input2: '',
      input3: '',
      shu: 12,
      shij: 18.8,
      quyu:'单人明区'
    })
    return { ...toRefs(data) }
  }
}
</script>

<style scoped>
.box {
  height: 100%;
  line-height: 50px;
}
</style>